<template>
  <a-modal
    :title="'查看详情'"
    :visible="true"
    width="70%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <a-card style="width:50%">

        <div>
          <span>发送内容：</span>
          <div class="left">
            {{displayStr}}
          </div>
        </div>
        <div style="margin-top:20px"><span>发送结果：</span>
          <div class="left">
            {{result}}
          </div>
        </div>

      </a-card>
      <a-card class="right">
        <a-row class="line">
          <a-col span="6">
            序号
          </a-col>
          <a-col span="18">
            <p>{{detail.id}}</p>
          </a-col>
        </a-row>
        <a-row class="line">
          <a-col span="6">
            发送openid
          </a-col>
          <a-col span="18">
            {{detail.openid}}
          </a-col>
        </a-row>
        <a-row class="line">
          <a-col span="6">
            业务类型
          </a-col>
          <a-col span="18">
            <span v-if="detail.businessType == 1">消息群发</span>
            <span v-else>接口调用</span>
          </a-col>
        </a-row>
        <a-row class="line">
          <a-col span="6">
            发送状态
          </a-col>
          <a-col span="18">
            <span v-if="detail.status == 1">发送成功</span>
            <span v-else>已发送</span>
          </a-col>
        </a-row>
        <a-row class="line">
          <a-col span="6">
            APPID
          </a-col>
          <a-col span="18">
            {{detail.appid}}
          </a-col>
        </a-row>

      </a-card>

    </div>

  </a-modal>
</template>

<script>
import { getAction } from '@/api/manage'
export default {
  props: {
    detail: {
      type: Object,
      default: null
    }
  },

  data() {
    return {
      urlKey: 'basemgt-wx',
      id: '',
      displayStr: '',
      result: '',
      loading: false,
      form: this.$form.createForm(this)
    }
  },

  created() {
    const { detail } = this.$props
    this.id = detail.id
    this.$nextTick(() => {
      this.loadData()
    })
  },

  methods: {
    reset() {
      this.form.resetFields()
      this.$emit('closeDetail')
    },
    loadData() {
      const params = {
        id: this.id
      }
      getAction(`${this.urlKey}/WxTemplateMsgSendRecord/findWxTemplateMsgSendRecordDetailById`, params).then(data => {
        if (data.code == 200) {
          this.displayStr = data.data.displayStr
          this.result = data.data.result
        } else {
          this.$message.warning(data.msg || data.message)
        }
      })
    }
  }
}
</script>
<style scoped>
.main {
  display: flex;
  justify-content: space-between;
}
.left {
  white-space: pre-line;
}
.right {
  width: 50%;
}
.exam {
  color: rgb(150, 151, 153);
  font-size: 20px;
  margin-top: 30px;
  text-align: center;
}
.line {
  margin-bottom: 20px;
}
.tip {
  color: #969799;
  font-size: 12px;
}
</style>

